<template>
  <div
    class="big-bg"
    ref="bg"
  >
    <img src="https://o6wndwjxn.qnssl.com/%E9%A1%B6%E9%83%A8@2x.png">
    <h3 class="teacher-form-title">
      一键开通您的专属课堂
    </h3>
    <div class="flex-title">
      特色服务
      <!-- <div class="text"></div> -->
    </div>
    <section class="gird">
      <div class="jiugong">
        <div
          class="juxing"
          style="margin-bottom:30px"
        >
          <span>免费<br/>入驻</span>
        </div>
        <div
          class="juxing"
          style="margin-bottom:30px"
        >
          <span>学员<br/>众多</span>
        </div>
        <div
          class="juxing"
          style="margin-bottom:30px"
        >
          <span>永久<br/>回放</span>
        </div>

        <div class="juxing">

          <span>全网<br/>宣传</span>

        </div>

        <div class="juxing">

          <span>持久<br/>收益</span>

        </div>

        <div class="juxing">

          <span>灵活<br/>提现</span>

        </div>

      </div>
    </section>
     <div class="flex-title">
      如何开通
      <!-- <div class="text"></div> -->
    </div>
    <section class="why">
      <div class="flex-title-one">
        <div class="te">绑定手机号</div>
        <div class="jiantou">
          <img src="https://o6wndwjxn.qnssl.com/%E6%AD%A5%E9%AA%A4@3x.png">
        </div>
        <div class="te">申请成为讲师</div>
        <div class="jiantou">
          <img src="https://o6wndwjxn.qnssl.com/%E6%AD%A5%E9%AA%A4@3x.png">
        </div>

        <div
          class="te"
          style="text-align: right;"
        >等待平台审核</div>
      </div>
    </section>
    <section class="xieyi">
      <label class="my_protocol">
        <input
          ref="checkbox"
          class="input_agreement_protocol"
          type="checkbox"
          @change="obc"
        />
        <span></span>
      </label>
      <p style="display:inline-block; margin-left:6px;"><span style="color:#fff;">我同意遵循</span>《<span
          style="text-decoration:underline"
          @click="gotoxieyi"
        >知运平台用户协议</span>》</p>
    </section>
    <section
      class="section-btn"
      @click="gobtb"
    >
      开通专属课堂
    </section>
    <section style="height:20px;width:100%;"></section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      demo1: false,
      iy: ''
    }
  },
  methods: {
    gotoxieyi () {
      this.$router.push({
        path: '/xieyi'
      })
    },
    obc (iy) {
      console.log(iy)
      if (this.$refs.checkbox.checked === true) {
        this.iy = true
      } else {
        this.iy = false
      }
    },
    selectFirst () {
      this.checklist001 = ['China']
    },
    gobtb () {
      if (this.iy === true) {
        this.$router.push({
          path: '/teacherForm'
        })
      } else {
        this.$vux.alert.show({
          title: '提示',
          content: `请同意知运用户平台协议`,
          onShow () {
            console.log('Plugin: I\'m showing')
          },
          onHide () {
            console.log('Plugin: I\'m hiding now')
          }
        })
      }
    },
    bgImgae () {
      this.$refs.bg.style.minHeight = window.innerHeight + 'px'
      setTimeout(() => {
        this.$store.commit('updateLoadingStatus', { isLoading: false })
      }, 500)
    }
  },
  mounted () {
    this.bgImgae()
  },
  created () {

  }
}
</script>
<style lang="less" scoped>
.my_protocol {
  width: 26/2px;
  height: 26/2px;
  border-radius: 3px;
  border: solid 1px #fff;
}
.my_protocol .input_agreement_protocol {
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  display: none;
}
.my_protocol .input_agreement_protocol + span {
  width: 23/2px;
  height: 19/2px;
  display: inline-block;
  background-size: 100% 100%;
  background: url("http://o6wndwjxn.qnssl.com/cf55d201903261047091519.png")
    no-repeat;
  // background-position-x: 0px;
  background-position-y: -18px;
  position: relative;
  top: 0px;
}
.my_protocol .input_agreement_protocol:checked + span {
  background-size: 100% 100%;
  background-position: 0px 0px;
}

.man {
  width: 102/2px;
  height: 144/2px;
  position: absolute;
  right: 0px;
  bottom: -10px;
}
.woman {
  width: 86/2px;
  height: 150/2px;
  position: absolute;
  left: 0px;
  bottom: -10px;
}
.big-bg {
  width: 100%;
  background: #f55239;
  background-size: 100% 100%;
}
.jiugong {
  width: calc(100% - 64px);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  .juxing {
    width: calc(100vw * 140 / 750);
    height: calc(100vw * 140 / 750);
    border-radius: 15px;
    position: relative;
    color: #fff;
    padding: 16px;
    font-family: PingFangSC-Semibold;
    background: linear-gradient(180deg,#ffe375,#ffcf12);
    span {
      display: block;
      font-size: 20px;
      letter-spacing: 0;
      position: absolute;
      width: 100%;
      text-align: center;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.xieyi {
  font-family: PingFangSC-Medium;
  font-size: 10px;
  color: rgb(18, 129, 204);
  letter-spacing: 0;
  width: 88%;
  padding: 12px 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.jiantou {
  flex: 0 0 20px;
  text-align: center;
    margin-top: 2px;
    margin-right: 2px;
    margin-left: 5px;
  img {
    width: 16px;
    height: 10px;
  }
}
.section-btn {
  width: 88%;
  margin: 0 auto;
  height: 45px;
  font-family: PingFangSC-Medium;
  font-size: 15px;
  color: #fff;
  letter-spacing: 0;
  text-align: center;
  background: linear-gradient(180deg,#ffe375,#ffcf12);
  line-height: 45px;
  border-radius: 30px;
}
.flex-title {
  width: 211px;
  height: 40px;
  position: relative;
  top:15px;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0 auto;
  line-height: 30px;
  color: #fff;
  font-size: 18px;
  text-align: center;
  background-image: url('https://o6wndwjxn.qnssl.com/%E7%9F%A2%E9%87%8F%E6%99%BA%E8%83%BD%E5%AF%B9%E8%B1%A1@3x.png');
  background-repeat: no-repeat;
  .line {
    width: 30%;
    height: 1px;
    background-color: #f86f46;
  }
  .text {
    flex: 1;
    font-family: PingFangSC-Semibold;
    font-size: 14px;
    color: #fff;
    letter-spacing: 0;
    line-height: 40px;
    text-align: center;
  }
}

.white {
  width: 75%;
  margin: 0 auto;
  height: 196/2px;
  background-color: #fff;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  position: relative;
  text-align: center;
  // background: url('http://o6wndwjxn.qnssl.com/314c3201902191040577439.png');
  background-size: 100% 100%;
  p:first-of-type {
    font-family: PingFangSC-Semibold;
    font-size: 20px;
    color: #f96946;
    letter-spacing: 0;
    text-align: center;
    padding-top: 20px;
  }
  p:last-of-type {
    font-family: PingFangSC-Medium;
    font-size: 13px;
    color: #f96946;
    letter-spacing: 0;
    text-align: center;
    position: absolute;
    bottom: 23px;
    text-align: center;
    width: 100%;
  }
}
.teacher-form-title {
  width: 100%;
  height: 35px;
  line-height: 35px;
  background-image: linear-gradient(-180deg, #ffe580 0%, #ffcf0f 100%);
  margin: 0 auto;
  color: #fff;
  font-size: 17px;
  text-align: center;
  font-family: PingFangSC-Medium;
  font-weight: 600;
}
.gird {
  width: 686 / 2px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: #fff;
  border-radius: 13px;
  margin-bottom: 10px;
}
.why {
  width: 88%;
  padding: 40px 0px 40px 0px;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 6px;
}
.flex-title-one {
  display: flex;
  width: 88%;
  margin: 0 auto;
  .te:first-of-type {
    text-align: center;
  }
  .te {
    font-family: PingFangSC-Medium;
    font-size: 13px;
    color: #333;
    letter-spacing: 0;
    flex: 1;
    text-align: center;
  }
  .te:last-of-type {
    text-align: center;
  }
}
</style>
